摘要

• 這篇文章的目的是 ?
• React「Forms」分享
• 連結

這篇文章的目的是 ?

在現代網頁應用程式中，表單是不可或缺的一部分。它們用於收集用戶輸入數據，從而實現各種功能，從登錄和註冊到搜尋和購物。然而，處理表單數據可能變得相當複雜，特別是當我們需要驗證輸入數據、處理表單提交並提供用戶反饋時。這就是為什麼我們需要一個強大而靈活的 React 表單管理解決方案的原因。

本文將介紹兩種流行的 React 表單管理庫：React Hook Form 和 Formik，並使用Yup來執行驗證。我們將詳細解釋這兩種庫的用法，並提供程式碼範例，以幫助你更好地理解它們。

React「Forms」分享

使用 React Hook Form 和 Yup

React Hook Form 是一個簡單且高效的庫，用於處理 React 表單。它基於 React 的 Hook 機制，使表單處理變得更加容易。結合 Yup，一個用於對表單數據進行驗證的庫，我們可以建立強大且可靠的表單。

首先，我們需要安裝 React Hook Form 和 Yup：

bashCopy code
npm install react-hook-form yup

接下來，讓我們看一下如何在 React Hook Form 中創建一個簡單的表單，並使用 Yup 進行驗證：

jsxCopy code
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required('請輸入用戶名'),
  email: yup.string().required('請輸入電子郵件').email('請輸入有效的電子郵件地址'),
});

function MyForm() {
  const { handleSubmit, control, errors } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>用戶名</label>
        <Controller
          name="username"
          control={control}
          render={({ field }) => <input {...field} />}
        />
        <p>{errors.username?.message}</p>
      </div>
      <div>
        <label>電子郵件</label>
        <Controller
          name="email"
          control={control}
          render={({ field }) => <input {...field} />}
        />
        <p>{errors.email?.message}</p>
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

在這個範例中，我們首先定義了一個 Yup 驗證模式(schema)，然後在表單組件中使用 useForm 和 Controller 來處理表單輸入字段。我們還使用了 resolver:yupResolver(schema) 來指定 Yup 驗證模式。最後，我們在表單提交時執行 onSubmit 函數，它會顯示表單數據或錯誤消息。

使用 Formik 和 Yup

Formik 是另一個流行的 React 表單管理庫，它提供了更多的功能和配置選項。結合 Yup，我們可以輕鬆地創建具有驗證功能的表單。

首先，我們需要安裝 Formik 和 Yup：

bashCopy code
npm install formik yup

接下來，讓我們看一下如何在 Formik 中創建一個簡單的表單，並使用 Yup 進行驗證：

jsxCopy code
import React from 'react';
import { Formik, Field, ErrorMessage, Form } from 'formik';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  username: Yup.string().required('請輸入用戶名'),
  email: Yup.string().required('請輸入電子郵件').email('請輸入有效的電子郵件地址'),
});

function MyForm() {
  const initialValues = {
    username: '',
    email: '',
  };

  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={schema}
      onSubmit={onSubmit}
    >
      <Form>
        <div>
          <label>用戶名</label>
          <Field type="text" name="username" />
          <ErrorMessage name="username" component="div" />
        </div>
        <div>
          <label>電子郵件</label>
          <Field type="text" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
}

export default MyForm;

在這個範例中，我們定義了一個 Yup 驗證模式(schema)，然後使用 Formik 提供的 Formik、Field 和 ErrorMessage 組件來處理表單輸入字段和錯誤消息。我們還在 Formik 組件中指定了 initialValues、validationSchema 和 onSubmit 屬性。

這就是使用 React Hook Form 和 Formik 來管理 React 表單的方法。這兩種庫都非常強大且靈活，你可以根據項目需求選擇適合的解決方案。希望這個教程能幫助你更好地理解和應用它們，提高你的表單處理效率。

連結

• React Hook Form：https://react-hook-form.com/
• Formik：https://formik.org/
• Yup：https://github.com/jquense/yup